import React, {PureComponent} from 'react'
import echarts from 'echarts';
import setBaseChart from '../chart/base-chart'
import {setTitle, scale, tooltip} from '../chart/util/common'

class Bar extends PureComponent {

    componentWillReceiveProps(nextProps){
        const {data} = nextProps
        const x = data.map(d=>d.name)
        const temperature1 = data.map(d=>d.temperature1)
        const temperature2 = data.map(d=>d.temperature2)
        const powerpercent = data.map(d=>d.powerpercent)

        this.myChart.setOption({
            xAxis: [{
                data: x
            }],
            series:[{
                data: temperature1
            }, {
                data: temperature2
            }, {
                data: powerpercent
            }]
        })
    }

    componentDidMount() {
        const {setChartInstance} = this.props
        this.myChart = setChartInstance(echarts.init(this.refs.chart));
        const option = {
            tooltip: {
                ...tooltip,
                trigger: 'axis',
                formatter: function (params, ticket, callback) {

                    var res = params[0].name;

                    for (var i = 0, l = params.length; i < l; i++) {
                        if (params[i].seriesType === 'line') {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + 'h';
                        } else {
                            res += '<br/>' + params[i].seriesName + ' : ' + (params[i].value ? params[i].value : '-') + '个';
                        }
                    }
                    return res;

                }
            },
            grid: {
                left: '5%',
                right: '5%',
                top: 30*scale,
                bottom: 32 * scale,
                containLabel: true
            },
            legend: {
                data: ['设置温度', '实际温度', '功率百分百'],
                bottom: 10 * scale,
                itemWidth: 25 * scale,
                itemHeight: 12 * scale,
                textStyle: {
                    color: '#fff',
                    fontSize: 12 * scale
                }
            },
            xAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisTick: {
                    "show": true
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * scale
                    }
                },
                data: ['H1', 'H2', 'h3', 'H4', 'H5', 'H6', 'H7', 'H8', 'H9', 'H10', 'H11', 'H12']
            }],
            yAxis: [{
                type: 'value',
                name: '温度',
                min: 0,
                position: 'left',
                nameTextStyle:{
                    color: '#fff',
                    fontSize: 12 * scale
                },
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * scale
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisTick: {
                    "show": false
                },
            }, {
                type: 'value',
                name: '百分百',
                min: 0,
                max:30,
                position: 'right',
                nameTextStyle:{
                    color: '#fff',
                    fontSize: 12 * scale
                },
                axisLabel: {
                    formatter: '{value} ',
                    textStyle: {
                        color: '#fff',
                        fontSize: 12 * scale
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                splitLine: {

                    show: false,
                    lineStyle: {
                        color: '#fff',
                        width: scale
                    }
                },
                axisTick: {
                    "show": false
                },
            }],
            series: [{
                name: '设置温度',
                type: 'bar',
                label: {
                    normal: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12 * scale
                        }
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2 * scale,
                        shadowColor: 'rgba(0,0,0,0.4)',
                        shadowBlur: 10,
                        shadowOffsetY: 10
                    }
                },
                data: []
            }, {
                name: '实际温度',
                type: 'bar',
                label: {
                    normal: {
                        show: false,
                        position: 'top',
                        textStyle: {
                            color: '#fff',
                            fontSize: 12 * scale
                        }
                    }
                },
                data: []
            }, {
                name: '功率百分百',
                type: 'line',
                yAxisIndex: 1,
                label: {
                    normal: {
                        show: false,
                        position: 'top'
                    }
                },
                data: []
            }]
        };
        this.myChart.setOption(option);
    }

    render() {
        return (
            <div style={{width: '100%', height: '100%'}} ref='chart'/>
        )
    }

}

export default setBaseChart(Bar)